<template>
	<view class="collect-page tn-safe-area-inset-bottom">
		<!-- 顶部导航栏 -->
		<tn-nav-bar fixed :isBack="true" backgroundColor="#ffffff" :bottomShadow="false" @click-back="navigateBack"
			backIconColor="#ffffff">
		</tn-nav-bar>

		<view class="page-content">
			<!-- 搜索栏 -->
			<view class="search-section tn-margin-top">
				<tn-input v-model="searchKeyword" placeholder="搜索收藏的活动" clearable>
					<template #prefix>
						<view class="tn-icon-search tn-padding-right-sm"></view>
					</template>
				</tn-input>
			</view>

			<!-- 收藏活动列表 -->
			<view class="collect-list tn-margin-top-lg">
				<view v-if="filteredList.length === 0" class="empty-state">
					<view class="empty-icon">
						<text class="tn-icon-favor tn-color-gray" style="font-size: 120rpx;"></text>
					</view>
					<text class="empty-text tn-text-lg tn-color-gray">暂无收藏活动</text>
					<text class="empty-desc tn-text-df tn-color-gray--light">快去发现精彩活动吧</text>
					<view class="empty-btn tn-margin-top-lg">
						<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" padding="20rpx 60rpx"
							@click="goToActivities">
							去发现活动
						</tn-button>
					</view>
				</view>

				<view v-else class="activity-list">
					<view class="activity-item tn-margin-bottom-lg" v-for="item in filteredList" :key="item.id">
						<view class="activity-card tn-shadow-blur tn-bg-white tn-radius">
							<!-- 图文内容 -->
							<view class="tn-blogger-content__wrap" @click="goToActivityDetail(item)">
								<!-- 图片区域（包含右上角状态标签） -->
								<view class="image-container">
									<image class="tn-blogger-content__main-image tn-blogger-content__main-image--1"
										:src="item.coverImage[0]" mode="aspectFill">
									</image>
								</view>
								<!-- 活动信息区域-->
								<view class="activity-info-wrapper tn-padding">
									<!-- 活动标题 -->
									<view class="title-container">
										<text
											class="activity-title tn-text-bold tn-text-lg tn-color-gray--dark">{{ item.title }}</text>
									</view>
									<!-- 时间信息区域 -->
									<view class="time-info">
										<view class="time-item tn-color-gray">
											<image class="time-icon" :src="timeIconUrl" mode="widthFix"></image>
											<text>{{ item.startTime }}至{{ item.endTime }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>
<script>
	export default {
		name: 'CollectList',
		data() {
			return {
				searchKeyword: '',
				showCancelModal: false,
				currentCancelId: null,
				timeIconUrl: '/static/activityImg/time.png',
				collectList: [{
						id: 1,
						title: '开源技术分享会 - 前端开发最佳实践',
						coverImage: ['/static/activityImg/3.jpg'],
						startTime: '2023-10-15 14:00',
						endTime: '2023-10-15 17:00'
					},
					{
						id: 2,
						title: '校园创业大赛决赛路演',
						coverImage: ['/static/activityImg/2.jpg'],
						startTime: '2023-10-20 09:00',
						endTime: '2023-10-20 12:00'
					},
					{
						id: 3,
						title: '校友企业参观 - 腾讯科技',
						coverImage: ['/static/activityImg/1.jpg'],
						startTime: '2023-10-25 13:30',
						endTime: '2023-10-25 16:30'
					}
				]
			}
		},
		computed: {
			// 筛选后的列表
			filteredList() {
				if (!this.searchKeyword) {
					return this.collectList
				}
				return this.collectList.filter(item =>
					item.title.toLowerCase().includes(this.searchKeyword.toLowerCase())
				)
			}
		},
		methods: {
			// 跳转到活动详情
			goToActivityDetail(item) {
				uni.navigateTo({
					url: `/preferredPages/activityDetail?id=${item.id}`,
					success: (res) => {
						res.eventChannel.emit('passActivityData', {
							data: item
						})
					}
				})
			},
			// 取消收藏
			cancelCollect(id) {
				this.currentCancelId = id
				this.showCancelModal = true
			},
			// 确认取消收藏
			confirmCancelCollect() {
				const index = this.collectList.findIndex(item => item.id === this.currentCancelId)
				if (index !== -1) {
					this.collectList.splice(index, 1)
					uni.showToast({
						title: '取消收藏成功',
						icon: 'success'
					})
				}
				this.showCancelModal = false
				this.currentCancelId = null
			},
			// 去发现活动
			goToActivities() {
				uni.switchTab({
					url: '/pages/index?targetTab=3'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.collect-page {
		min-height: 100vh;
		background-color: #F7F7F7;
	}

	.page-content {
		padding: 120rpx 30rpx 30rpx;
	}

	.search-section {
		background-color: #FFFFFF;
		border-radius: 15rpx;
		padding: 20rpx;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 0;
		text-align: center;
	}

	.empty-icon {
		margin-bottom: 30rpx;
	}

	.empty-text {
		margin-bottom: 15rpx;
	}

	.empty-desc {
		color: #AAAAAA;
	}

	.activity-card {
		overflow: hidden;
	}

	.image-container {
		position: relative;
		width: 100%;
		height: 300rpx;
	}

	.tn-blogger-content__main-image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.activity-info-wrapper {
		padding: 30rpx;
	}

	.activity-title {
		line-height: 1.4;
		display: block;
		margin-bottom: 20rpx;
	}

	.time-info {
		font-size: 26rpx;
	}

	.time-item {
		display: flex;
		align-items: center;
	}

	.time-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.activity-actions {
		border-top: 1rpx solid #F0F0F0;
		padding: 30rpx;
	}

	.action-btn {
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		background-color: #F7F7F7;
		transition: all 0.3s;
	}

	.action-btn:active {
		background-color: #EEEEEE;
	}
</style>